<template>
  <div>
    <p>Axios发送网络请求</p>
    <div>
      <p>不需要权限</p>
      <button @click="get">get请求【获取】</button>&nbsp;&nbsp;&nbsp;
      <button @click="post">post请求【新增、修改】</button>&nbsp;&nbsp;&nbsp;
      <button @click="put">put请求【修改】</button>&nbsp;&nbsp;&nbsp;
      <button @click="del">delete请求【修改】</button>&nbsp;&nbsp;&nbsp;
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    get () {
      /**
       * 参数1：请求地址
       * 参数2：参数，它内部有一个特定的属性 params: {}
       */
      // axios
      //   .get('http://huangjiangjun.top:3001/api/person', {
      //     params: { name: 'zhangsan', age: 100 }
      //   })
      //   .then(res => {
      //     console.log('---res--', res)
      //   })
      // axios
      //   .get(`http://huangjiangjun.top:3001/api/person?id=1001&name=张三`)
      //   .then(res => {
      //     console.log('---res--', res)
      //   })

      axios({
        url: 'http://huangjiangjun.top:3001/api/person',
        method: 'GET',
        params: {
          name: 'zhangsan',
          age: 100
        }
      }).then(res => {
        console.log('---res---', res)
      })
    },
    async post () {
      /**
       * 参数1：url，
       * 参数2：对象，就是你传递的参数
       */
      // const res = await axios.post('http://huangjiangjun.top:3001/api/person', {
      //   username: 'admin',
      //   password: '123456'
      // })

      const res = await axios({
        url: 'http://huangjiangjun.top:3001/api/person',
        method: 'POST',
        data: {
          username: 'admin',
          password: '123456'
        }
      })

      console.log('---res---', res)
    },
    // 函数前面加了async 就成了异步函数
    async put () {
      const res = await axios.put(
        'http://huangjiangjun.top:3001/api/person/1001',
        {
          name: 'zhangsan',
          age: 100
        }
      )

      console.log('---res---', res)
    },
    /**
     * 1、在函数前面加上async
     * 2、里面要有一个await与之匹配，并且await 后面一般接上promise对象
     */
    async del () {
      const res = await axios.delete(
        'http://huangjiangjun.top:3001/api/person/1001',
        {
          params: {
            name: 'wangwu',
            age: 666
          }
        }
      )

      console.log('---res---', res)
    }
  }
}
</script>
